-@title= 'Label | Admin Page '
-@page_classes= 'label'

.container
  .col-12
    %h1 Labels
    %span.label.label-default Default
    %span.label.label-primary Primary
    %span.label.label-success Success
    %span.label.label-info Info
    %span.label.label-warning Warning
    %span.label.label-danger Danger
  %hr.col-12
  .col-12
    .panel.panel-primary
      .panel-header
        %h3.panel-title
          Label | Source Code
      .panel-body
        :code
          # lang: html
          <span class="label label-default">Default</span>
          <span class="label label-primary">Primary</span>
          <span class="label label-success">Success</span>
          <span class="label label-info">Info</span>
          <span class="label label-warning">Warning</span>
          <span class="label label-danger">Danger</span>
  %hr.col-12
  .col-6
    %h1 Dropdown Button
    =link_to 'Dropdown', 'javascript:void()', class:'easyui-menubutton l-btn-primary', 'data-options':"menu:'#mm5'"
    #mm5{'data-options':' itemHeight:32'}
      %div{'data-options':"iconCls:'fa fa-chevron-circle-right'"}
        =link_to '#' do
          =lorem.words 2
      %div{'data-options':"iconCls:'fa fa-chevron-circle-right'"}
        =link_to '#' do
          =lorem.words 2
      %div{'data-options':"iconCls:'fa fa-chevron-circle-right'"}
        =link_to '#' do
          =lorem.words 2
  %hr.col-12
  .col-12
    .panel.panel-primary
      .panel-header
        %h3.panel-title
          Dropdown Button
      .panel-body
        :code
          # lang: html
          <a href="#" class="easyui-menubutton l-btn-primary" data-options="menu:'#mm1'">Dropdown</a>
          <div id="mm1">
            <div data-options="iconCls:'fa fa-chevron-circle-right'">
              <a href="#">Item</a>
            </div>
            <div data-options="iconCls:'fa fa-chevron-circle-right'">
              <a href="#">Item</a>
            </div>
            <div data-options="iconCls:'fa fa-chevron-circle-right'">
              <a href="#">Item</a>
            </div>
          </div>

  .col-6
    %h1 Progress Bar
    .easyui-progressbar{'data-options':'value:80'}
  %hr.col-12
  .col-12
    .panel.panel-primary
      .panel-header
        %h3.panel-title
          Progress Bar | Source Code
      .panel-body
        :code
          # lang: html
          <div class="easyui-progressbar" data-options="value:80"></div>
  %hr.col-12
  .col-12
    %h1 Tooltips
    =link_to 'Tooltips Top', 'javascript:void()', class:'easyui-linkbutton l-btn-default easyui-tooltip', title:'This is the tooltip message.', 'data-options':"position:'top'"
    =link_to 'Tooltips Right', 'javascript:void()', class:'easyui-linkbutton l-btn-primary easyui-tooltip', title:'This is the tooltip message.', 'data-options':"position:'right'"
    =link_to 'Tooltips Bottom', 'javascript:void()', class:'easyui-linkbutton l-btn-info easyui-tooltip', title:'This is the tooltip message.', 'data-options':"position:'bottom'"
    =link_to 'Tooltips Left', 'javascript:void()', class:'easyui-linkbutton l-btn-warning easyui-tooltip', title:'This is the tooltip message.', 'data-options':"position:'left'"
  %hr.col-12
  .col-12
    .panel.panel-primary
      .panel-header
        %h3.panel-title
          Tooltips | Source Code
      .panel-body
        :code
          # lang: html
          <a href="#" title="This is tooltip message" class="easyui-tooltip" data-options="position:'top'">Tooltips</a>
  %hr.col-12
  .col-12
    %h1 Button Color Variables
    =link_to 'Button Default', 'javascript:void()', class:'easyui-linkbutton l-btn-default'
    =link_to 'Button Primary', 'javascript:void()', class:'easyui-linkbutton l-btn-primary'
    =link_to 'Button Info', 'javascript:void()', class:'easyui-linkbutton l-btn-info'
    =link_to 'Button Success', 'javascript:void()', class:'easyui-linkbutton l-btn-success'
    =link_to 'Button Warning', 'javascript:void()', class:'easyui-linkbutton l-btn-warning'
    =link_to 'Button Danger', 'javascript:void()', class:'easyui-linkbutton l-btn-danger'
  %hr.col-12
  .col-12
    .panel.panel-primary
      .panel-header
        %h3.panel-title
          Button Color Variables | Source Code
      .panel-body
        :code
          # lang: html
          <a class="easyui-linkbutton l-btn-default" href="#">Button Default</a>
          <a class="easyui-linkbutton l-btn-primary" href="#">Button Primary</a>
          <a class="easyui-linkbutton l-btn-info" href="#">Button Info</a>
          <a class="easyui-linkbutton l-btn-success" href="#">Button Success</a>
          <a class="easyui-linkbutton l-btn-warning" href="#">Button Warning</a>
          <a class="easyui-linkbutton l-btn-danger" href="#">Button Danger</a>
  %hr.col-12
  .col-12
    %h1 Button with Icons
    =link_to 'Button With Default(Left) Icon', 'javascript:void()', class:'easyui-linkbutton l-btn-primary', 'data-options':"iconCls:'fa fa-user'"
    =link_to 'Button With Right Icon', 'javascript:void()', class:'easyui-linkbutton l-btn-primary', 'data-options':"iconCls:'fa fa-user', iconAlign:'right'"
    =link_to 'Button With Top Icon', 'javascript:void()', class:'easyui-linkbutton l-btn-primary', 'data-options':"iconCls:'fa fa-user fa-1x', iconAlign:'top'"
    =link_to 'Button With Bottom Icon', 'javascript:void()', class:'easyui-linkbutton l-btn-primary', 'data-options':"iconCls:'fa fa-user', iconAlign:'bottom'"
    =link_to 'Button Disabled', 'javascript:void()', class:'easyui-linkbutton l-btn-danger', 'data-options':"iconCls:'fa fa-lock', disabled:true"
  %hr.col-12
  .col-12
    .panel.panel-primary
      .panel-header
        %h3.panel-title
          Button with Icons | Source Code
      .panel-body
        :code
          # lang: html
          <a class="easyui-linkbutton l-btn-primary" href="#" data-options="iconCls:'fa fa-user'">Button With Icon</a>
          <a class="easyui-linkbutton l-btn-danger" href="#" data-options="iconCls:'fa fa-user', disabled:true">Button Disabled</a>
  %hr.col-12
  .col-12
    =link_to 'Gift', 'javascript:void()', class:'easyui-linkbutton l-btn-danger', 'data-options':"iconCls:'fa fa-gift fa-3x', size:'large', iconAlign:'top'"
    =link_to 'Gift', 'javascript:void()', class:'easyui-linkbutton l-btn-danger', 'data-options':"iconCls:'fa fa-gift fa-3x', size:'large', iconAlign:'bottom'"
    =link_to 'Calendar', 'javascript:void()', class:'easyui-linkbutton l-btn-primary', 'data-options':"iconCls:'fa fa-calendar fa-2x', size:'large', iconAlign:'right'"
    =link_to 'Mail Inbox', 'javascript:void()', class:'easyui-linkbutton l-btn-success', 'data-options':"iconCls:'fa fa-envelope-o fa-2x', size:'large', iconAlign:'left'"
  %hr.col-12
  .col-12
    .panel.panel-primary
      .panel-header
        %h3.panel-title
          Large Buttons | Source Code
      .panel-body
        :code
          # lang: html
          <a class="easyui-linkbutton l-btn-default" href="#" data-options="iconCls:'fa fa-camera fa-2x', size:'large', iconAlign:'top'">Camera</a>
          <a class="easyui-linkbutton l-btn-primary" href="#" data-options="iconCls:'fa fa-calendar fa-2x', size:'large', iconAlign:'top'">Calendar</a>
          <a class="easyui-linkbutton l-btn-info" href="#" data-options="iconCls:'fa fa-dashboard fa-2x', size:'large', iconAlign:'top'">Dashboard</a>
          <a class="easyui-linkbutton l-btn-success" href="#" data-options="iconCls:'fa fa-envelope-o fa-2x', size:'large', iconAlign:'top'">Mail</a>
          <a class="easyui-linkbutton l-btn-warning" href="#" data-options="iconCls:'fa fa-gear fa-2x', size:'large', iconAlign:'top'">Setting</a>
          <a class="easyui-linkbutton l-btn-danger" href="#" data-options="iconCls:'fa fa-folder fa-2x', size:'large', iconAlign:'top'">Folder</a>
  %hr.col-12
  .col-12
    =link_to 'Left', 'javascript:void()', class:'easyui-linkbutton l-btn-default', 'data-options':"iconCls:'fa fa-arrow-circle-o-left', iconAlign:'left'"
    =link_to 'Right', 'javascript:void()', class:'easyui-linkbutton l-btn-primary', 'data-options':"iconCls:'fa fa-trash', iconAlign:'right'"
    =link_to 'Top', 'javascript:void()', class:'easyui-linkbutton l-btn-info', 'data-options':"iconCls:'fa fa-times', iconAlign:'top'"
    =link_to 'Bottom', 'javascript:void()', class:'easyui-linkbutton l-btn-success', 'data-options':"iconCls:'fa fa-volume-down', iconAlign:'bottom'"
  %hr.col-12
  .col-12
    .panel.panel-primary
      .panel-header
        %h3.panel-title
          Buttons Icon Position | Source Code
      .panel-body
        :code
          # lang: html
          <a class="easyui-linkbutton l-btn-default" href="#" data-options="iconCls:'fa fa-arrow-circle-o-left', iconAlign:'left'">Left</a>
          <a class="easyui-linkbutton l-btn-primary" href="#" data-options="iconCls:'fa fa-trash', iconAlign:'right'">Right</a>
          <a class="easyui-linkbutton l-btn-primary" href="#" data-options="iconCls:'fa fa-times', iconAlign:'top'">Top</a>
          <a class="easyui-linkbutton l-btn-primary" href="#" data-options="iconCls:'fa fa-volume-down', iconAlign:'bottom'">Bottom</a>
  %hr.col-12
  .col-12
    %h1 Button Hover Effect
    =link_to 'Bounce', 'javascript:void()', class:'easyui-linkbutton l-btn-danger l-btn-bounce', 'data-options':"iconCls:'fa fa-gift', iconAlign:'left'"
    =link_to 'Fade', 'javascript:void()', class:'easyui-linkbutton l-btn-default l-btn-fade', 'data-options':"iconCls:'fa fa-times', iconAlign:'right'"
  %hr.col-12
  .col-12
    .panel.panel-primary
      .panel-header
        %h3.panel-title
          Buttons Hover Effect| Source Code
      .panel-body
        :code
          # lang: html
          <a class="easyui-linkbutton l-btn-default l-btn-bounce" href="#" data-options="iconCls:'fa fa-camera fa-2x', size:'large', iconAlign:'top'">Bounce</a>
          <a class="easyui-linkbutton l-btn-default l-btn-fade" href="#" data-options="iconCls:'fa fa-times', iconAlign:'right'">Fade</a>
  %hr.col-12
